<template>
  <div class="container">
    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <template #header>
        <div class="home_title">
          <span>{{ getTimePeriod() }}，{{ userStore.username }}</span>
        </div>
      </template>
      <div class="home_content">
        <img :src="userStore.avatar" alt="" srcset="" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
import { getTimePeriod } from '@/utils/time'
import { onMounted, ref } from 'vue'

let userStore = useUserStore()
</script>

<style scoped lang="scss">
.home_title {
  font-size: 18px;
  font-weight: 600;
}
.home_content {
  img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
}
</style>
